{% extends 'base.html' %}
{% block title %}
    <title>首页</title>
{% endblock %}

{% block body %}
<!--    <p>{{ cs }}</p>-->
<!--    {% for b in cs %}-->
<!--        {{ b }}-{{ forloop.first }}-->
<!--    {% endfor %}-->


    <h1>这是首页</h1>
<div class="row">
    <div class="col-md-6">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
                {% for ads in adss %}
                {% if forloop.first %}
                    <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}" class="active"></li>
                {% else %}
                    <li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}"></li>
                {% endif %}
                {% endfor %}
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
                {% for ads in adss %}
                {% if forloop.first %}
                    <div class="item active">
                {% else %}
                    <div class="item">
                {% endif %}
                      <a href="{{ ads.url }}"><img src="media/{{ ads.img }}" alt="..."></a>
                      <div class="carousel-caption">
                        {{ ads.title }}
                      </div>
                    </div>
                {% endfor %}
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
    </div>
    <div class="col-md-6">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
      {% for c in cs %}
        {% if forloop.first %}
            <li role="presentation" class="active"><a href="#tab{{ c.id }}" aria-controls="tab{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>
        {% else %}
            <li role="presentation"><a href="#tab{{ c.id }}" aria-controls="tab{{ c.id }}" role="tab" data-toggle="tab">{{ c.title }}</a></li>
        {% endif %}
      {% endfor %}

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">


        {% for c in cs %}
            {% if forloop.first %}
                <div role="tabpanel" class="tab-pane active" id="tab{{ c.id }}">
            {% else %}
                <div role="tabpanel" class="tab-pane" id="tab{{ c.id }}">
            {% endif %}
                    <ul class="list-group">
                    {% for b in c.book_set.all %}
                        <li class="list-group-item"><a href="{% url 'main:detail' b.id %}">{{ b }}</a></li>
                    {% endfor %}
                    </ul>
                </div>
        {% endfor %}

  </div>

</div>
</div>
</div>



{% endblock %}